<!-- 测试 Unocss 使用 -->
<style>
    .k-card {
        color: #161209;
        background-color: #f8f8f8;
    }

    [theme=dark] .k-card {
        color: #a9a9b3;
        background-color: #252627;
    }

    [theme=black] .k-card {
        color: #d9d9d9;
        background-color: #000;
    }
</style>
<link rel="stylesheet" as="style" href="{{ "css/uno.css" | relURL }}">
<div class="flex flex-col gap-2">
    <div class="grid w-full grid-flow-dense grid-cols-4 gap-3 color-base">
        <div
            class="card-basic k-card col-span-2 row-span-2 aspect-square md:col-span-2 md:row-span-2 md:aspect-square card-transition">
            <div class="relative flex h-full w-full flex-col justify-end"><img
                    src="https://cdn.ftls.xyz/images/2022/11/zhishi1.jpg"
                    class="rounded-lg object-cover transition-all absolute inset-0 w-full h-full"><a target="_blank"
                    href="https://www.ftls.xyz">

                </a>
                <div class="z-10 sm:p-2 p-1">
                    <div class="inline-block rounded-md px-1 py-0.5 transition-colors k-card">
                        智慧之神</div>
                </div>
            </div>
        </div>





        <div
            class="card-basic k-card col-span-2 row-span-1 aspect-2/1 md:col-span-1 md:row-span-1 md:aspect-square card-transition">
            <a class="w-full h-full transition" target="_blank" href="https://www.ftls.xyz">
                <div class="flex h-full w-full flex-col justify-between cursor-pointer pa-5">
                    <div class="text-2xl color-base">恐咖兵糖</div>
                    <div class="text-base color-fade">芝士，与你分享！</div>
                </div>
            </a>
        </div>

        <div
            class="card-basic k-card col-span-2 row-span-1 aspect-2/1 md:col-span-1 md:row-span-1 md:aspect-square card-transition">
            <div class="flex flex-col items-center text-base p-2">
                <div>Social Link</div>
                <div class="flex flex-grow gap-2 color-base text-base p-2">
                    <div class="i-mdi-github w-[1.5em] h-[1.5em]"></div>
                    <div class="i-mdi-twitter w-[1.5em] h-[1.5em]"></div>
                    <div class="i-mdi-email w-[1.5em] h-[1.5em]"></div>
                </div>
            </div>
        </div>

        <div
            class="card-basic k-card col-span-2 row-span-1 aspect-2/1 md:col-span-1 md:row-span-1 md:aspect-square card-transition">
            <div class="text-base p-2 text-center flex flex-col gap-1">
                <span>Welcome !</span>
            </div>
        </div>

        <div
        class="card-basic k-card col-span-2 row-span-1 aspect-2/1 md:col-span-1 md:row-span-1 md:aspect-square card-transition">
        <a class="text-base p-2 h-full w-full flex flex-col" href="{{ relURL "about/"}}">
            <span class="text-2xl mx-auto my-auto">About</span>
        </a>
    </div>

        <!-- <div
            class="card-basic k-card col-span-2 row-span-4 aspect-1/2 md:col-span-1 md:row-span-2 md:aspect-1/2 card-transition">
            <div class="relative flex h-full w-full flex-col justify-end">
                <img src="https://archived.ftls.xyz/hugo-m3/bento-img-1.webp"
                    class="rounded-lg object-cover transition-all absolute inset-0 w-full h-full">
            </div>
        </div> -->

        <div
            class="card-basic k-card col-span-4 row-span-1 aspect-4/1 md:col-span-3 md:row-span-1 md:aspect-3/1 card-transition">
            <div class="flex h-full w-full flex-col justify-between">
                <div class="flex items-center gap-1 justify-between pl-2 pr-1 pt-2 text-sm tracking-tight text-sand-11">
                    <span class="text-base text-sand-11 py-0.5 truncate">Blog</span>
                    <a href="{{ relURL "posts/"}}">
                        <div class="flex h-6 w-6 items-center justify-center rounded-full transition-colors cursor-alias"
                            data-state="closed"><svg class="transform rotate-45" xmlns="http://www.w3.org/2000/svg"
                                width="12" height="12" viewBox="0 0 24 24" fill="none">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-miterlimit="10" stroke-width="1.5"
                                    d="M18.07 9.57L12 3.5 5.93 9.57M12 20.5V3.67"></path>
                            </svg>
                        </div>
                    </a>
                </div>
                {{ range first 1 ( where .Site.RegularPages "Section" "posts") }}

                <div class="relative">
                    <div class="px-2 pt-1 flex flex-col justify-end h-full"><a href="/">
                            <div class="font-serif text-xl md:text-2xl font-light text-balance break-words line-clamp-3"
                                style="word-break:break-word">
                                {{ .Title }}
                            </div>
                        </a><span class="mt-1 mb-2 block text-base -tracking-[0.03em]">{{ "01-02" | .Date.Format }}</span></div>
                    <!-- <div class="absolute right-2 bottom-2 flex gap-2 scale-95">
                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-miterlimit="10" stroke-width="1.5" d="M9.57 5.93L3.5 12l6.07 6.07M20.5 12H3.67">
                            </path>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-miterlimit="10" stroke-width="1.5"
                                d="M14.43 5.93L20.5 12l-6.07 6.07M3.5 12h16.83"></path>
                        </svg>
                    </div> -->
                </div>
                
                {{ end }}
            </div>
        </div>


        <div
        class="card-basic k-card col-span-2 row-span-2 aspect-square md:col-span-1 md:row-span-1 md:aspect-square card-transition">
        <div class="relative flex h-full w-full flex-col justify-end">
            <img src="https://cdn.ftls.xyz/images/2023/09/1694676070568.jpg?image_process=quality,Q_10"
                class="rounded-lg object-cover transition-all absolute inset-0 w-full h-full">
        </div>
    </div>

        <div
            class="card-basic k-card col-span-4 row-span-2 aspect-2/1 md:col-span-3 md:row-span-1 md:aspect-3/1 card-transition">
            <div class="flex h-full w-full flex-col justify-between">
                <div class="flex items-center justify-between pl-2 pr-1 pt-1 text-base tracking-tight text-sand-11">
                    <span class="text-base text-sand-11 py-1.5">Whispers</span><a href="{{ relURL "whispers/" }}">
                        <div class="flex h-6 w-6 items-center justify-center rounded-full transition-colors cursor-alias   text-sand-11"
                            data-state="closed"><svg class="transform rotate-45" xmlns="http://www.w3.org/2000/svg"
                                width="12" height="12" viewBox="0 0 24 24" fill="none">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-miterlimit="10" stroke-width="1.5"
                                    d="M18.07 9.57L12 3.5 5.93 9.57M12 20.5V3.67"></path>
                            </svg></div>
                    </a>
                </div>
                <div class="flex-1 overflow-hidden relative">
                    <div class="pt-0 flex flex-col justify-end h-full">
                        <div class="text-base px-2 overflow-auto flex-1" id="whisper">微语</div>
                        <!-- <span
                            class="mt-1 mb-2 px-2 block text-base -tracking-[0.03em] text-sand-11">Jan 26,
                            2024</span> -->
                    </div>
                    <!-- <div class="absolute right-2 bottom-2 flex gap-2 transofrm scale-95 text-sand-11"><svg
                            xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-miterlimit="10" stroke-width="1.5" d="M9.57 5.93L3.5 12l6.07 6.07M20.5 12H3.67">
                            </path>
                        </svg><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24"
                            fill="none">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-miterlimit="10" stroke-width="1.5"
                                d="M14.43 5.93L20.5 12l-6.07 6.07M3.5 12h16.83"></path>
                        </svg></div> -->
                </div>
            </div>
        </div>



        <div
            class="card-basic k-card col-span-2 row-span-2 aspect-square md:col-span-1 md:row-span-1 md:aspect-square card-transition">
            <div class="relative flex h-full w-full flex-col justify-end">
                <img src="https://cdn.ftls.xyz/images/2023/09/1694676073560.jpg?image_process=quality,Q_10"
                    class="rounded-lg object-cover transition-all absolute inset-0 w-full h-full">
            </div>
        </div>
    </div>
</div>

<script>
    fetch("https://gotosocial-kkbt-tools-xkzlczgovq.cn-hangzhou.fcapp.run/api/v1/accounts/01CZ5J6DTPXEAHWZYZG73TPNH9/statuses?limit=1&exclude_replies=true")
        .then(response => response.json())
        .then(data => {
            document.getElementById("whisper").innerHTML = data[0].content.slice(0, 100);
        })
</script>